<template>
	<view>
		<u-navbar :isBack="true" title="支付详情" title-color="#101010"></u-navbar>
		<view style="background: rgba(252, 116, 4, 0.12);padding: 16rpx 32rpx;color: #FC7404;font-size: 32rpx;">
			请耐心等待师傅上门
		</view>
		<view>
			<view style="padding: 32rpx;display: flex;align-items: center;" 
			@click="toJump('/pages/user/userAddress')">
				<view style="flex: 1;font-size: 28rpx;">
					<view v-if="addressData.nickname">
						<view style="font-size: 40rpx;font-weight: bold;">{{addressData.addrdetails}}</view>
						<view style="color: #999999;margin-top: 16rpx;">{{addressData.nickname}} {{addressData.mobile}}</view>
					</view>
					<view v-else>
						<view style="font-size: 40rpx;font-weight: bold;">服务地址</view>
						<view style="color: #999999;margin-top: 16rpx;">请选择或添加您的服务地址</view>
					</view>
				</view>
				<view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view style="padding: 32rpx;display: flex;">
				<view style="font-size: 32rpx;">服务时间</view>
				<view style="flex: 1;display: flex;align-items: center;">
					<!-- <view style="margin-left: 48rpx;">
						<text style="color: #666666;"> 请选择服务上门时间 </text>
					</view> -->
					<picker class="u-flex-1" mode="multiSelector" :value="serviceDateIndexes" 
					range-key="key" :range="serviceDate" @change="onDateChange">
						<view style="text-align: right;padding-right: 10rpx;">
							{{serviceDate[0][serviceDateIndexes[0]].value}} {{serviceDate[1][serviceDateIndexes[1]].value}}
						</view>
					</picker>
				</view>
				<view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<u-gap height="24" bg-color="#F5F5F5"></u-gap>
		
		<!-- 商品信息 -->
		<view style="padding: 32rpx;font-size: 28rpx;">
			<!-- <view v-for="(item, indexs) in goodsData"  style="margin-top: 24rpx;"> -->
			<view v-if="goodsData" style="margin-top: 24rpx;">
				<view style="display: flex;">
					<image :src="goodsData.image" mode="widthFix" style="width: 200rpx;"></image>
					<view style="margin-left: 8rpx;flex: 1;">
						<view style="font-size: 28rpx;font-weight: bold;">{{ goodsData.title }}</view>
						<view style="background: #F5F5F5;padding: 8rpx 16rpx;width: 212rpx;
						border-radius: 8rpx;margin-top: 16rpx;">
							<text style="font-size: 24rpx;color: #999999;padding-right: 8rpx;">{{ goods_sku_text }}</text>
							<!-- <u-icon name="arrow-down" color="#999999" size="24"></u-icon> -->
						</view>
						<view style="margin-top: 36rpx;display: flex;justify-content: space-between;">
							<view style="font-weight: bold;">
								<text>￥</text>
								<text>{{ price }}</text>
							</view>
							<view>
								<u-number-box v-model="sum" @change="valChange"></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="24" bg-color="#F5F5F5"></u-gap>
		<!-- 价格信息 -->
		<view style="padding: 32rpx;" v-if="type == 2">
			<view style="display: flex;justify-content: space-between;">
				<view style="">
					<view style="color: #333333;">订单总额</view>
				</view>
				<view style="">
					<view style="color: #333333;">¥ {{ order_amount }} </view>
				</view>
			</view>
		</view>
		<view style="padding: 32rpx;" v-if="type == 3">
			<view style="display: flex;justify-content: space-between;">
				<view style="">
					<view style="color: #333333;">预约金</view>
				</view>
				<view style="">
					<view style="color: #333333;">¥{{demandData.deposit}}</view>
				</view>
			</view>
		</view>
		
		<!-- 没有定价服务信息 -->
		<view v-if="type == 3">
			<u-gap height="24" bg-color="#F5F5F5"></u-gap>
			<view style="padding: 32rpx;">
				<view style="color: #666666;">需求描述</view>
				<view style="margin-top: 16rpx;">
					{{demandData.description}}
				</view>
				<view style="" v-if="demandData.images">
					<image :src="item" mode="aspectFill" 
					v-for="(item, index) in demandData.images" :key="index"
					style="width: 200rpx;height: 200rpx;border-radius: 16rpx;
					margin-right: 16rpx;margin-top: 10rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 32rpx;">
					<view style="">
						<view style="color: #666666;">需求备注</view>
					</view>
					<view style="">
						{{demandData.memo}}
					</view>
				</view>
			</view>
		</view>
		
		<view style="height: 120rpx;"></view>
		<!-- 底部按钮 -->
		<view style="position: fixed;bottom: 0;width: 100%;padding: 16rpx 32rpx;
		background: #fff;display: flex;justify-content: space-between;align-items: center;">
			<view style="color: #FC7404;font-weight: bold;">
				<text>￥</text>
				<text style="font-size: 40rpx;"> {{ order_amount }} </text>
			</view>
			<view style="">
				<view style="background: #FC7404;
				padding: 18rpx 32rpx;border-radius: 16rpx;margin-left: 24rpx;color: #fff;"
				@click="clickSubmit">立即下单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import configUrl  from '@/utils/config.js';
	import { request } from 'utils/request.js';
	export default {
		name: "FinanceRegister",
		data() {
			return {
				goods_id: 0,
				skuprice_id: 0,
				price: 0,
				sum: 0,
				goods_sku_text: '',
				
				value: '20',
				boxNumber: [1],
				
				addressData: {nickname:''},
				serviceDate: [],
				serviceDateIndexes: [0, 0],
				strServiceData: "",
				starttime: '',
				order_amount:'0.00',
				goodsData: {},
				type: 2,
				demandData: {},
				carIds:'',
				sku:''
			};
		},
		onReady() {
			var self = this;
			let now = new Date();
			now.setDate(now.getDate() - 1);
			this.serviceDate = [[],[]];
			for (let i = 0; i < 7; i++) {
			  now.setDate(now.getDate() + 1);
			  let dF = "";
			  switch (i) {
				case 0: dF = "(今天) "; break;
				case 1: dF = "(明天) "; break;
				case 2: dF = "(后天) "; break;
			  }
			  this.serviceDate[0].push({key: dF + (now.getMonth() + 1) + "-" + now.getDate(), value: now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()});
			}
			this.serviceDateIndexes = [0, 0];
			this.serviceDate[1].push({key:"8:00-10:00", value: "8:00"});
			this.serviceDate[1].push({key:"10:00-12:00", value: "10:00"});
			this.serviceDate[1].push({key:"12:00-14:00", value: "12:00"});
			this.serviceDate[1].push({key:"14:00-16:00", value: "14:00"});
			this.serviceDate[1].push({key:"16:00-18:00", value: "16:00"});
			this.serviceDate[1].push({key:"18:00-20:00", value: "18:00"});
			console.log('this.serviceDate: ', this.serviceDate);
			
			let starttime = this.serviceDate[0][this.serviceDateIndexes[0]].value + " " + this.serviceDate[1][this.serviceDateIndexes[1]].value;
			this.starttime = starttime;
		},
		onLoad(e){
			uni.$on('userAddressAdd', (e) => {
				console.log('userAddressAdd: ', e);
				// this.formModal.nickname = e.nickname;
				// this.formModal.mobile = e.mobile;
				// this.formModal.longitude = e.longitude;
				// this.formModal.latitude = e.latitude;
				// this.formModal.location_str = e.region;
				// this.formModal.location_detail = e.addrdetails
				this.addressData = e;
			});
			
			// 防止没有登录的时候
			uni.$on('pageRefresh', (e) => {
				this.infoDetails();
			});
			if(e.goods_id){
				this.goods_id = e.goods_id;
			}
			if(e.skuprice_id){
				this.skuprice_id = e.skuprice_id;
				this.goods_sku_text = e.goods_sku_text;
			}
			if(e.sum){
				this.sum = e.sum;
				this.price = e.price;
				this.order_amount = e.sum * e.price;
			}
			if(e.type){
				this.type = e.type;
			}
			if(e.car){
				this.carIds = e.goods_id;
			}
			this.infoDetails();
			
			let orderParams = uni.getStorageSync('orderParams');
			if(orderParams){
				this.demandData = orderParams;
				let images = orderParams.images;
				images = images.split(",");
				console.log('images_length: ', images.length);
				if(images.length > 0){
					for(let i = 0; i < images.length; i++){
						images[i] = configUrl.appurlImg + images[i];
					}
					this.demandData.images = images;
				}
				console.log('demandData: ', this.demandData);
			}
			
			
		},
		methods: {
			valChange(e){
				// console.log(e);
				this.order_amount = this.price * e.value;
			},
			infoDetails(){
				request.getWithToken({
					url: '/goods/goodsDetails',
					data: {goods_id : this.goods_id}
				}).then(res=>{
					console.log('商品详情：', res);
					this.goodsData = res.data.goodsData;
					// this.order_amount = res.data.goodsData.price;
				});
				// goodsApi.getGoodsConfirmData({goods_id: this.goods_id,carIds:this.carIds}).then(res => {
				// 	console.log(res);
				// 	this.addressData = res.userAddress;
				// 	this.goodsData = res.infoData;
				// 	if(uni.getStorageSync("goodsSku")){
				// 		this.sku = uni.getStorageSync("goodsSku");
				// 		this.goodsData[0].price = uni.getStorageSync("goodsPrice");
				// 		// console.log(11111,this.goodsData[0])
				// 		this.order_amount = uni.getStorageSync("goodsPrice");
				// 	}else{
				// 		this.order_amount = res.amount.toFixed(2);
				// 	}
					
				// });
			},
			// 提交订单
			clickSubmit(){
				let params = {};
				params = this.addressData;
				params.starttime = this.starttime;
				params.category_ids = this.goodsData.category_ids;
				params.goods_id = this.goods_id;
				
				params.skuprice_id = this.skuprice_id;
				params.sum = this.sum;
				params.memo = '购买定价服务';
				params.description = this.goodsData.title;
				
				// params.desc_image = '';
				// if(this.type == 3){
				// 	params.memo = this.demandData.memo;
				// 	params.description = this.demandData.description;
				// 	params.desc_image = this.demandData.desc_image;
				// 	params.deposit = this.demandData.deposit;
				// }
				// params.type = this.type;
				// params.carIds = this.carIds;
				request.postWithToken({
					url: '/order/createOrder',
					data: params
				}).then(res=>{
					console.log(res);
					uni.navigateTo({
						url: '/pages/pay/payment?orderId=' + res.data
					});
					// this.actualDescImgs = res.data.orderData.desc_images;
				});
				// orderApi.createOrder(params).then(res => {
				// 	console.log(res);
				// 	uni.navigateTo({
				// 		url: '/pages/users/goods/pay?orderId=' + res,
				// 	});
				// });
			},
			// 页面跳转
			toJump(e){
				uni.navigateTo({
					url: e,
				});
			},
			
			onDateChange(e) {
				let indexes = e.detail.value;
				this.serviceDateIndexes = e.detail.value;
				let starttime = this.serviceDate[0][this.serviceDateIndexes[0]].value + " " + this.serviceDate[1][this.serviceDateIndexes[1]].value;
				this.starttime = starttime;
				// console.log(this.formModal.starttime);
			},
		}
	};
</script>

<style>
	page {
		/* background: #FE8127 !important; */
	}
</style>
<style lang="scss" scoped>
	// @import "static/css/public-custom-form.scss";

	.circle {
	    display: inline-block; /* 行内元素块状化 */
	      width: 30px;
	      height: 30px;
	      font-size: 16px;
	      color: #ffffff; /* 字体颜色 */
	      text-align: center; /* 水平居中 */
	      line-height: 30px; /* 垂直居中 */
	      border-radius: 50%; /* 圆形 */
	      background: #000000; /* 背景色，也可以用url()方法引用背景图片 */
	}

	.confirm-btn {
	  margin: 32rpx;
	  // width: calc(100vw - 64rpx);
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  color: #FC7404;
	  background-color: #fff;
	  // border-radius: 999px;
	  border-radius: 24rpx;
	  &:active {
		background-color: lighten(#fff, 10%);
	  }
	}
</style>
